<template>
  <div class="wrap">
    <user-check-box
      v-model="queryParams.userIds"
      @change="changeOption" :filter-stop="true"
      @apiUserFinish="changeOption"
      :disdisabled="loading"
      class="mgt10 mgb10"
    ></user-check-box>
    <div class="header">
      <div class="search-line">
        <el-select v-model="queryParams.shipmentStatus" clearable class="mgr10" @change="changeOption">
          <el-option label="货件状态" value=""></el-option>
          <el-option
            v-for="item in FLShipmentStatusList"
            :key="item.status"
            :label="item.name"
            :value="item.status"
          >
          </el-option>
        </el-select>
        <el-select v-model="queryParams.transferType" clearable class="mgr10" @change="changeOption">
          <el-option label="收货渠道" value=""></el-option>
          <el-option
            v-for="item in transferTypeList"
            :key="item.transferType"
            :label="'墨西哥' + item.typeName"
            :value="item.transferType"
          >
          </el-option>
        </el-select>
        <el-select v-model="queryParams.employeeId" clearable class="mgr10" @change="changeOption">
          <el-option label="销售员" value=""></el-option>
          <el-option
            v-for="item in employeeSaleList"
            :key="item.id"
            :label="item.account"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-input v-model="queryParams.keyword" style="width: 200px" placeholder="搜索 客户编号/货件单号"></el-input>
        <el-button type="primary" @click="changeOption">搜索</el-button>
        <export-button :func="func" :query-params="queryParams"  :getTotal="tableData.length"></export-button>
      </div>

      <div class="search-line">
        <el-select v-model="queryParams.timeField" class="mgr10" @change="changeOption">
          <el-option label="制单时间" value="create_time"></el-option>
          <el-option label="收货时间" value="fl_received_time"></el-option>
          <el-option label="到仓时间" value="received_time"></el-option>
        </el-select>
        <diy-date style="display: inline-block" :set-day-type="30" v-model="queryParams.times" @change="changeOption" ></diy-date>
      </div>

      <div class="search-line">
        <el-tabs v-model="queryParams.feeStatus" @tab-click="changeOption">
          <el-tab-pane :label="item.name + `(${item.num})`" :name="item.status" v-for="item in tabNumber" :key="item.status"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="content">
      <div class="table" v-loading="loading">
       <shipment-data-table :table-data="tableData" @changeData="getData" :agent-list="agentList" :api-times="apiTimes" :sum-list="sumList"></shipment-data-table>
      </div>
    </div>
  </div>
</template>

<script>
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import ShipmentStatusMixin from "@/views/FLData/mixin/ShipmentStatusMixin";
import shippingPlanDataMixin from "@/views/shippingPlan/mixin/shippingPlanDataMixin";
import EmployeeMixin from "@/views/FLData/mixin/EmployeeMixin";
import DiyDate from "@/views/statistics/components/DiyDate.vue";
import {getFinanceShipmentList} from "@/api/finance";
import ShipmentDataTable from "@/views/FLData/components/ShipmentDataTable.vue";
import ExportButton from "@/views/order/components/ExportButton.vue";
import {exportType} from "@/utils/exportType";

export default {
  name: "shipmentData",
  computed: {
    exportType() {
      return exportType
    }
  },
  mixins: [ShipmentStatusMixin, shippingPlanDataMixin, EmployeeMixin],
  components: {ExportButton, ShipmentDataTable, DiyDate, UserCheckBox},
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        userIds: [],
        shipmentStatus: '',
        transferType: '',
        employeeId: '',
        keyword: '',
        timeField: 'create_time',
        times: [],
        feeStatus: 'all',
      },
      loading: false,
      tableData: [],
      tabNumber: [
        {status: 'untreated', name: '未处理', num: 0},
        {status: 'wait_settle', name: '待结算', num: 0},
        {status: 'settling', name: '结算中', num: 0},
        {status: 'settled', name: '已结算', num: 0},
        {status: 'all', name: '全部', num: 0},
      ],
      func: getFinanceShipmentList,
      apiTimes: 0,
      agentList: [],
      sumList: null,
    }
  },
  created() {
  },
  methods: {
    getData(){
      this.loading = true
      getFinanceShipmentList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.apiTimes++
          this.tableData = res.data
          this.agentList = res.info.agentList
          this.sumList = res.info.sumList
          res.info.tabNumber.forEach(item=>{
            this.tabNumber.some(item2=>{
              if(item2.status === item.status){
                item2.num = item.num
                return true
              }
            })
          })
        })
    },
    changeOption() {
      this.queryParams.page = 1;
      this.getData();
    }
  },
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20px 20px;
  .header{
    display: flex;
    flex-direction: column;
    .search-line{
      margin-bottom: 10px;
    }
  }
  .content{
    padding: 20px 0 0;
  }
}
</style>
